<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>大数据可视化</title>
    <script type="text/javascript" th:src="@{js/jquery.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{js/echarts.min.js}"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;padding: 20px;display: inline-block"></div>
<div id="pieChart" style="width: 600px;height:400px;padding: 20px;display: inline-block"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var pieChart = echarts.init(document.getElementById('pieChart'));

    // 指定图表的配置项和数据
    myChart.setOption({
        title: {
            text: '各类群作品数'
        },
        tooltip: {},
        legend: {
            data: ['作品数']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [
            {
                name: '作品数',
                type: 'bar',
                data: [],
                itemStyle: {
                    color: '#8181F7'
                }
            }
        ]
    });

    pieChart.setOption({
        title : {
            text: '各作品评论数',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: []
        },
        series : [
            {
                name: '评论数',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data: [],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    });


    // 异步加载数据
    $.get('/admin/echarts').done(function (data) {
        // 填入数据
        myChart.setOption({
            xAxis: {
                data: data.data.categoryList
            },
            series: [
                {
                    data: data.data.countList
                }
            ]
        });
    });

    // 异步加载数据
    $.get('/admin/pie').done(function (data) {
        // 填入数据
        pieChart.setOption({
            series: [
                {
                    data:data.data.pieData
                    // data: (function(){
                    //     var rs = [];
                    //     for(var res in data.data.pieData){
                    //         rs.push({
                    //             name :data.data.pieData[res].name,
                    //             value:data.data.pieData[res].value
                    //         });
                    //     }
                    //     return rs;
                    // })()
                }
            ]
        });
    });

</script>
</body>
</html>
